<template>
    <div v-loading="loading">
      <!--面包导航  并且以/隔开   ：separator="/"-->
      <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
        <el-breadcrumb-item :to="{ path: '/home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item >系统管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/system/menus'}">菜单管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!--菜单列表展示分页数据 el-card-->
      <el-card class="box-card">
        <div>
          <!--查询 功能-->
          <el-row>
              <el-col :span="12">
              <div>
                <el-input placeholder="请输入关键字进行过滤" v-model="keyword" clearable></el-input>
              </div>
              </el-col>
              <el-col :span="5">
                <div>
                 <el-button type="primary" icon="el-icon-plus" style="margin-left: 20px" @click="openParentAdd">添加父级菜单</el-button>
                </div>
              </el-col>
              <el-col :span="3">
                <div>
                  <!-- v-hasPermission="'menu:export'"-->
                  <el-button icon="el-icon-download" style="margin-left: 20px" @click="downExcel">导出</el-button>
                </div>
              </el-col>
          </el-row>

          <!--属性菜单列表-->
          <p>菜单权限树</p>
         <el-table :data="filterData" row-key="id" border style="width: 100%" ref="tree">
           <el-table-column prop="menuName"
              header-align="left"
              min-width="80"
              label="名称"
           >
           </el-table-column>
           <el-table-column  header-align="center" align="center" label="图标">
             <template slot-scope="scope">
               <i :class="scope.row.icon || ''"></i>
             </template>
           </el-table-column>

           <el-table-column prop="type"
                            header-align="left"
                            min-width="80"
                            label="类型"
           >
             <template slot-scope="scope">
               <el-tag v-if="scope.row.type===0" >菜单</el-tag>
               <el-tag v-else >按钮</el-tag>
             </template>
           </el-table-column>

           <el-table-column
             prop="orderNum"
             header-align="center"
             align="center"
             label="排序号"
           >
           </el-table-column>
           <el-table-column
             prop="url"
             header-align="center"
             align="center"
             width="150"
             :show-overflow-tooltip="true"
             label="菜单URL"
           >
           </el-table-column>
           <el-table-column
             prop="perms"
             header-align="center"
             align="center"
             width="150"
             :show-overflow-tooltip="true"
             label="授权标识"
           >
           </el-table-column>
           <el-table-column
             fixed="right"
             header-align="center"
             align="center"
             width="150"
             label="操作"
           >
             <template slot-scope="scope">
               <el-button
                 v-has-permission=""
                 type="text"
                 size="small"
                 @click="openAdd(scope.row)"
               >添加子菜单</el-button
               >
               <el-button
                 v-has-permission=""
                 type="text"
                 size="small"
                 @click="edit(scope.row)"
               >修改</el-button
               >
               <el-button
                 v-has-permission=""
                 type="text"
                 size="small"
                 @click="delNode(scope.row.id)"
               >删除</el-button
               >
             </template>
           </el-table-column>
         </el-table>
        </div>

      </el-card>
    <!--点击添加，新增弹框，需要写填写菜单信息-->
      <el-dialog :title="addTitle" :visible.sync="addDialogVisible" @close="addClose" width="50%">
          <span>
            <el-form
            size="mini"
            ref="addFormRef"
            :model="addForm"
            label-width="80px"
            :rules="addFormRules"
            >
              <!-- prop="menuName"  校验非空必填项-->
              <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="addForm.menuName"></el-input>
              </el-form-item>
              <el-form-item label="URl">
                 <el-input v-model="addForm.url"></el-input>
              </el-form-item>

              <el-form-item label="权限编码">
                <el-input v-model="addForm.perms"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-input v-model="addForm.icon"></el-input>
              </el-form-item>
              <el-form-item label="是否可用" prop="disabled">
               <template>
                 <el-radio v-model="addForm.disabled" :label="false">可用</el-radio>
                 <el-radio v-model="addForm.disabled" :label="true">禁用</el-radio>
               </template>
              </el-form-item>
              <el-form-item label="是否展开" prop="open">
               <template>
                 <el-radio v-model="addForm.open" :label="1">展开</el-radio>
                 <el-radio v-model="addForm.open" :label="0">关闭</el-radio>
               </template>
              </el-form-item>
              <el-form-item label="排序" prop="orderNum">
                <el-input-number  v-model="addForm.orderNum" :min="1" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <el-form-item label="类型" prop="type">
               <template>
                 <el-radio v-model="addForm.type" :label="0">菜单</el-radio>
                 <el-radio v-model="addForm.type" :label="1">按钮</el-radio>
               </template>
              </el-form-item>
            </el-form>
          </span>

        <!--需要  确认和取消的按钮-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible =false">取消</el-button>
          <el-button type="primary" @click="saveMenu" :loading="bthLoading" :disabled="btnDisabled">确认</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Menu",
        data() {
            return {
              bthLoading: false,
              btnDisabled: false,
              loading: false,
              keyword: '',
              data:[],
              // filterDate: [],
              addTitle: '',
              addDialogVisible:false,
              addForm:{
                menuName: "",
                parentId: "",
                url: "",
                type: "",
                orderNum: "",
                disabled: "",
                open: "",
                perms: ""
              },
              addFormRules:{
                menuName: [
                  { required: true, message: '菜单名称不能为空', trigger: "blur" },
                  { min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur" }
                ],
                disabled: [
                  { required: true, message: '菜单状态不能为空', trigger: "blur" },
                ],
                orderNum: [
                  { required: true, message: '排序不能为空', trigger: "blur" },
                ],
                open: [
                  { required: true, message: "是否展开不能为空", trigger: "blur" }
                ],
                type: [
                  { required: true, message: "菜单类型不能为空", trigger: "blur" }
                ]
              }

            }
        },
        computed:{
          filterData(){
            return this.data.filter((menu)=>{
              return  menu.menuName.indexOf(this.keyword)!=-1
            })
          }
        },
        // watch: {
        //   keyword(value){
        //     console.log(value)
        //      this.data.filter((menu)=>{
        //      return  menu.menuName.indexOf(value)!=-1
        //     })
        //   }
        // },
        created(){
          this.getMenuTreeList();
        },
        methods:{
         async delNode(id){
            if(id){
              const msg =  await  this.$confirm("此操作将永久删除菜单信息，是否继续？","提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }
              ).catch(()=>{
                this.$message({
                  type: "info",message: "已取消删除"
                })
              });
              if(msg === 'confirm'){
                const { data :res} = await this.$http.delete('/system/menu/delete/'+id);
                debugger
                if (res.success) {
                  this.$message.success("菜单信息删除成功");
                  await this.getMenuTreeList();
                } else {
                  this.$message.error("菜单信息删除失败:" + res.data.errorMsg);
                }
              }
            }
          },
          edit(row){
            if(row){
              this.addTitle = "编辑：【"+ row.menuName + "】菜单信息的内容：";
              //这是查询数据库的一种方式
              // this.$http.get("system/menu/edit/"+row.id).then(res =>{
              //   if(res.data.success){
              //     debugger
              //     this.addForm = res.data.data;  //赋值
              //     this.addDialogVisible = true;  //弹出编辑的对话框。去编辑菜单信息
              //   }else{
              //     return this.$message.error("菜单编辑失败："+res.data.errorMsg)
              //   }
              // })
              //点击编辑的时候把行数据传递过来了，
              this.addForm = row;
              this.addDialogVisible = true;
            }
          },
          async getMenuTreeList() {
            const { data: res} = await  this.$http.get('system/menu/treeList');
            if(res.success){
              console.log(res.data);
              this.data = res.data.tree;
            }
          },
          //点击父节点
          openParentAdd() {
            //给弹框一个标题
            this.addTitle = "添加第一级菜单";
            this.addDialogVisible = true;
            this.addForm.parentId = 0;//初始话第一集菜单的父节点Id 为0
          },
          //导出
          downExcel(){

          },
          //关闭
          addClose() {
            //清理之前表单校验的记录
            this.$refs.addFormRef.clearValidate();
            ////清理之前表单填写的记录
            this.addForm = {};
          },
          openAdd(data) {
            this.addDialogVisible = true;
            this.addTitle ="添加节点：当前【"+ data.menuName + "】";
            this.addForm.parentId = data.id;
          },
          //点击确认，保存菜单信息
          saveMenu(){
            this.$refs.addFormRef.validate(valid =>{
                if(!valid){ //表单校验为false的是否，校验失败就不能提交表单数据到后台，直接返回
                  return;
                }else{//只有表单校验为true的时候，才能去提交表数据到后台
                  this.bthLoading = true;
                  this.btnDisabled = true;
                  //提交表单数据到后台，发起请求的方式：是post,提交的数据为：this.addForm
                  this.$http.post('system/menu/saveMenu',this.addForm).then(res =>{
                    if(res.data.success){
                      this.$message.success("菜单数据保存成功");
                      //关闭新增的弹框
                      this.addDialogVisible = false;
                      // 重新去查询新增加菜单的数据
                      this.getMenuTreeList();

                    }else{
                      this.$message.error("菜单数据保存失败:" +res.data.errorMsg)
                    }
                    this.btnDisabled = false;
                    this.bthLoading= false;
                  });
                }
            })
          }
        }
    }
</script>

<style scoped>
  .el-loading-mask{
    background-color: lavender;
  }
</style>
